<template>
  <div>
    <div class="j-brief">
      <router-link to="/society" tag="span">{{zannueBrief[0]}}</router-link>
      <router-link to="/school" tag="span" class="active">{{zannueBrief[1]}}</router-link>
    </div>
    <h1>成都倍特药业2018校园招聘</h1>
    <h3>{{zannueBrief[2]}}</h3>
    <div class="tb zhaoping">
      <div class="tab-head">
        <p>{{tabName1[0]}}</p>
        <p>{{tabName1[1]}}</p>
        <p>{{tabName1[2]}}</p>
      </div>
      <div>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%;" class="spHight">
          <el-table-column
            prop="name"
            label="宣讲学校"
            style="width: 33.3%;"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="time"
            label="宣讲日期"
            style="width: 33.3%;"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="address"
            label="宣讲场地"
            style="width: 33.3%;"
            align="center"
            >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <h3>{{zannueBrief[3]}}</h3>
    <div class="tb">
      <div class="tab-head">
        <p>{{tabName2[0]}}</p>
        <p>{{tabName2[1]}}</p>
        <p>{{tabName2[2]}}</p>
        <p>{{tabName2[3]}}</p>
      </div>
      <div>
        <el-table
          :data="tableData2"
          stripe
          style="width: 100%;" class="spHight">
          <el-table-column
            prop="name"
            label="宣讲学校"
            style="width: 25%;"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="num"
            label="招聘人数"
            style="width: 25%;"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="address"
            label="工作地点"
            style="width: 25%;"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="time"
            label="发布时间"
            style="width: 25%;"
            align="center"
            >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data () {
    return {
      lists: [],
      tableData: [
        {
          name: '',
          time: '',
          address: ''
        }
      ],
      tableData2: [
        {
          name: '',
          num: '',
          time: '',
          address: ''
        }
      ]
    }
  },
  props: {
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'zannueBrief': 'zannueBrief',
      'tabName1': 'tabName1',
      'tabName2': 'tabName2'
    })
  },
  components: {
  },
  created () {
    // this._getList()
    this.lists = [
      {
        id: 1
      },
      {
        id: 2
      },
      {
        id: 3
      }
    ]
    // this.$store.dispatch('cp', 3)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/util/common.scss';
.active {
  background-color: #2154b9;
  color: #fff!important;
}
h1 {
  padding: 36rem/$font-size-base 0;
  font-size: 30rem/$font-size-base;
  letter-spacing: 1px;
  color: #333;
  font-weight: bolder;
  text-align: left;
  padding-left: 30rem/$font-size-base;
}
h3 {
  font-size: 30rem/$font-size-base;
  letter-spacing: 3px;
  color: #0051bb;
  text-align: center;
  padding-top: 34rem/$font-size-base;
  padding-bottom: 31rem/$font-size-base;
  font-weight: bolder
}
.tb {
  width: 100%;
}
.zhaoping {
  width: 100%;
  p {
    width: 25%
  }
}
</style>
